<template>
  <div class="main">
    <ServicePriceDialog ref="createUserPriceDialogRef" @refresh="onSearch" />
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pt-[12px] overflow-auto"
    >
      <el-form-item label="关键字" prop="keyword">
        <el-input
          v-model="form.keyword"
          placeholder="请输入"
          clearable
          class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item label="系统拥有者" prop="ownerId">
        <el-select
          v-model="form.ownerId"
          placeholder="请选择"
          class="!w-[180px]"
        >
          <el-option
            v-for="item in userList"
            :key="item.agentId"
            :label="item.username"
            :value="item.agentId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="服务类型" prop="serviceType">
        <el-input
          v-model="form.serviceType"
          placeholder="请输入"
          clearable
          class="!w-[180px]"
        />
      </el-form-item>

      <el-form-item label="状态" prop="enabled">
        <el-select
          v-model="form.enabled"
          placeholder="请选择"
          clearable
          class="!w-[180px]"
        >
          <el-option label="启用" :value="true" />
          <el-option label="禁用" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      show-overflow-tooltip
      stripe
      border
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column prop="serviceType" label="服务代码名称" />
      <el-table-column label="价格">
        <template #default="scope">
          {{ scope.row.defaultPrice ?? "--" }}
        </template>
      </el-table-column>
      <el-table-column :formatter="formatOwner" label="系统拥有者" />
      <el-table-column label="状态">
        <template #default="scope">
          <el-button link type="success">
            {{ scope.row.enabled ? "启用" : "禁用" }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="300">
        <template #default="scope">
          <el-button
            link
            type="success"
            size="small"
            @click="createUserPrice(scope.row)"
          >
            设置服务类型价格
          </el-button>
          <el-popconfirm
            width="220"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="确定删除该服务类型的价格配置吗？"
            @confirm="delPrice(scope.row)"
          >
            <template #reference>
              <el-button link type="danger" size="small">
                删除服务类型价格
              </el-button>
            </template>
            <template #actions="{ confirm, cancel }">
              <el-button size="small" @click="cancel">取消</el-button>
              <el-button type="danger" size="small" @click="confirm">
                确定
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="tableStatus"
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[10, 20, 40, 50]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { InfoFilled } from "@element-plus/icons-vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "@iconify-icons/ep/refresh";
import {
  getServicePriceConfigList,
  deleteServicePriceConfig
} from "@/api/adminPriceApi";
import ServicePriceDialog from "./components/ServicePriceDialog.vue";
import { message } from "@/utils/message";
import { getAdminAgentsList } from "@/api/adminAgentApi";
const formRef = ref();
const loading = ref(false);
const form = reactive({
  ownerId: 0,
  enabled: "",
  serviceType: "",
  keyword: ""
});
const pagination = reactive({
  total: 0,
  pageSize: 20,
  currentPage: 1
});
const tableData = ref([]);
const createUserPriceDialogRef = ref();
const createUserPrice = (row: any) => {
  createUserPriceDialogRef.value?.open(row);
};
const delPrice = async (row: any) => {
  try {
    await deleteServicePriceConfig(row.serviceType);
    message("删除成功", { type: "success" });
    onSearch();
  } catch (e) {
    console.log(e);
  }
};
const tableStatus = ref(true);
const onSearch = async () => {
  try {
    const params = {
      page: pagination.currentPage,
      size: pagination.pageSize,
      ...form
    };
    const { data } = await getServicePriceConfigList(params);
    tableStatus.value = true;
    const { records, total, size, current } = data;
    tableData.value = records;
    pagination.total = total;
    pagination.pageSize = size;
    pagination.currentPage = current;
  } catch (error) {
    console.log(error);
  }
};
const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  pagination.currentPage = 1;
  onSearch();
};
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
  onSearch();
};
const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  pagination.currentPage = 1;
  onSearch();
};
const userList = ref([
  {
    agentId: 0,
    username: "主系统"
  }
]);
const formatOwner = (row: any) => {
  return (
    userList.value.find(item => item.agentId === row.ownerId)?.username ||
    "主系统"
  );
};
const queryUserList = async () => {
  const res = await getAdminAgentsList({ page: 1, size: 100 });
  const agentList = res?.data?.records || [];
  userList.value = [...userList.value, ...agentList];
};
onMounted(() => {
  onSearch();
  queryUserList();
});
</script>
<style lang="scss" scoped>
.main {
  padding: 20px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  .el-pagination {
    margin-top: 20px;
    justify-content: flex-end;
  }
}
</style>
